import React from "react";

import Form from "./Form";
import List from "./List";

import { useDispatch, useSelector } from "react-redux";
import {
  increment,
  decrement,
  incrementByAmount,
  incrementAsync,
} from "./store/counter/counterSlice";

const App = () => {
  const value = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <>
      <h2>redux-toolkit</h2>
      <button onClick={() => dispatch(decrement())}>-</button>
      <span>{value}</span>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(incrementByAmount({ n: 3 }))}>+3</button>
      <button onClick={() => dispatch(incrementAsync({ n: 5 }))}>
        async +5
      </button>

      <hr />

      <Form />
      <List />
    </>
  );
};

export default App;
